<template lang="">
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="管理账号名">
        <el-input v-model="form.adminname" />
      </el-form-item>
      <el-form-item label="管理账密码">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item label="管理角色">
        <el-select v-model="form.role" placeholder="请选择角色">
          <el-option label="超级管理" :value="2" />
          <el-option label="普通管理" :value="1" />
        </el-select>
      </el-form-item>

      <el-form-item label="权限" :label-width="100">
        <!-- node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	string -->
        <el-tree
          ref="treeRef"
          :data="menuArr"
          node-key="name"
          show-checkbox
          :props="{ label: 'name', children: 'children'}"
          @check="treeChange"
          :check-strictly="false"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { userAddRequest } from "@/api/user"
import { ElMessage } from "element-plus"
import menuArr from "@/router/menu.js"
export default {
  data() {
    return {
      form: {
        adminname: "",
        password: "",
        role: 1,
        checkedKeys: []
      },
      menuArr: menuArr
    }
  },
  methods: {
    treeChange(e, data) {
      console.log(data)
      this.form.checkedKeys.push(data.halfCheckedKeys[0])
      this.form.checkedKeys=data.checkedKeys
      console.log(this.form)
      
    },
    async onSubmit() {
      // console.log(this.form)
      let r = await userAddRequest(this.form)
      console.log(r)
      if (r.data.code == 200) {
        ElMessage({
          type: "success",
          message: r.data.message
        })
      } else {
        ElMessage({
          type: "error",
          message: r.data.message
        })
      }
    }
  }
}
</script>
<style lang=""></style>
